<template>
	<view class="all">
		<view style="height: var(--status-bar-height);background-color: #ffffff;">
			<!-- app状态栏高度占位 -->
		</view>
		<view class="navbar">
			<view class="" style="opacity: 0;">
				房间
			</view>
			<view class="">
				房间
			</view>
			<view class="" style="color: #FF8330;" @click="toAddRoom">
				新增
			</view>
		</view>
		<view class="container">
			<view class="item"  v-for="(item,index) in dataList" :key="index" @click="toRoomDetial(item)">
				<view class="pic">
					<image style="height: 256rpx;width: 100%;" :src="item.home_img" mode=""></image>
				</view>
				<view class="text">
					<view class="text_1">
						{{item.home_type}}
					</view>
					<view class="text_2">
						{{item.home_detail}}
					</view>
					<view class="text_3">
						￥{{item.home_price}}/月
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getHomeType} from '@/utils/api.js'
	export default {
		data() {
			return {
				dataList:[]
			};
		},
		onShow() {
			getHomeType().then((res)=>{
				console.log(res,'ss');
				if(res.data.meta.status==200){
					this.dataList=res.data.data
				}
			})
		},
		methods:{
			toRoomDetial(item){
				console.log(item,'item');
				uni.navigateTo({
					url:'/pages/room/roomDetial?homeTypeId='+item.id
				})
			},
			toAddRoom(){
				uni.navigateTo({
					url:'/pages/room/roomAdd',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	.navbar{
		height: 50px;
		padding: 0 30rpx;
		line-height: 50px;
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
		font-weight: 500;
		color: #242424;
		background-color: #ffffff;
	}
	.container{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		.item{
			width: 43%;
			padding: 24rpx;
			.pic{
				height: 256rpx;
				width: 100%;
			}
			.text{
				padding: 21rpx 24rpx 0 24rpx;
				.text_1{
					font-size: 32rpx;
					font-weight: bold;
					color: #242424;
				}
				.text_2{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #868686;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.text_3{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #E82828;
				}
			}
		}
	}
}
</style>
